<!--
 * @Date: 2022-12-25 17:52:04
 * @LastEditors: 于波
 * @LastEditTime: 2022-12-25 23:21:38
 * @Description:个人中心
-->
<template>
  <div class="content">
    <div class="avatar">
      <div><i class="iconfont blog-Touxiang"></i></div>
    </div>
    <div class="info">
      <span>用户名：{{ store.state.userinfo.username }}</span>
      <span>|</span>
      <span>文章数：{{ userinfo.articleNumber }}</span>
      <span>|</span>
      <span>上传工具：{{ userinfo.toolsNumber }}</span>

      <span>|</span>
      <span>所属地：{{ userinfo.ip }}</span>
      <span>|</span>
      <el-button type="primary" @click="exportArticle">导出所有文章</el-button>
    </div>
    <div class="tab">
      <div
        class="tabItem"
        v-for="(item, index) in tabList"
        :class="index == tabIndex ? 'current' : ''"
        @click="tabIndex = index"
      >
        {{ item }}
      </div>
    </div>
    <div class="list">
      <div class="articleList" v-if="tabIndex == 0">
        <div v-for="item in articleList">
          <router-link :to="`/article/${item.id}`" target="_blank">{{
            item.title
          }}</router-link>
        </div>
      </div>
      <div class="tools" v-if="tabIndex == 1">
        <el-card :body-style="{ textAlign: 'center' }" v-for="item in tools">
          <img
            :src="
              item.path.split('.')[1] == 'exe'
                ? exeIcon
                : item.path.split('.')[1] == 'zip'
                ? zipIcon
                : fileIcon
            "
          />
          <div style="padding: 14px; min-height: 50px">
            {{ item.fileName }}
          </div>
          <div>
            <el-button type="primary">下载</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import store from "@/store";
import { reactive, ref } from "vue";
import {
  GetArticleByUserId,
  GetFileListByUserId,
  getUserData,
  download,
} from "@/api/request";
import exeIcon from "@/assets/exeIcon.svg";
import fileIcon from "@/assets/fileIcon.svg";
import zipIcon from "@/assets/zipIcon.svg";
import { ElCard, ElButton } from "element-plus";
import "element-plus/es/components/card/style/css";
import "element-plus/es/components/button/style/css";
const userinfo = reactive({
  articleNumber: 0,
  toolsNumber: 0,
  ip: "未知",
});
const tabList = ["我发布的文章", "我上传的工具"];
const tabIndex = ref(0);
const articleList = ref([]);
const tools = ref([]);
const getData = async () => {
  let data = await getUserData();
  userinfo.articleNumber = data.articleNumber;
  userinfo.toolsNumber = data.toolsNumber;
  userinfo.ip = data.ip;
};
const exportArticle = async () => {
  let res = await download();
  var blob = new Blob([res], { type: "application/zip" });
  var url = URL.createObjectURL(blob);
  var a = document.createElement("a");
  a.href = url;
  a.download = Date.now() + ".zip";
  a.style.display = "none";
  document.body.appendChild(a);
  a.click();

  setTimeout(function () {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 100);
};
GetArticleByUserId().then((res) => {
  articleList.value = res.data;
});
GetFileListByUserId().then((res) => {
  tools.value = res.data;
});
getData();
</script>
<style scoped lang="less">
.content {
  padding: 20px 100px;
  .avatar {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;

    i {
      color: rgb(183, 183, 183);
      font-size: 200px;
      margin-right: 50px;
      position: relative;
      overflow: hidden;
      transform: translateX(20px) translateY(20px);
    }
  }
  .info {
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      margin-right: 20px;
    }
  }
  .tab {
    display: flex;
    margin-top: 50px;
    margin-bottom: 20px;
    .tabItem {
      padding: 20px 0;
      margin-right: 20px;
      cursor: pointer;
      position: relative;
      user-select: none;
    }

    @keyframes borderWidth {
      from {
        width: 0px;
      }
      to {
        width: 100%;
      }
    }
    .current {
      display: flex;
      flex-flow: column;
      align-items: center;
      &::after {
        display: block;
        content: "";
        width: 100%;
        height: 3px;
        border-radius: 2px;
        background-color: #00c8c8;
        position: absolute;
        bottom: 0;
        animation: borderWidth 300ms;
      }
    }
  }
}
.list {
  .articleList {
    div {
      padding: 10px 0;
      font-weight: 700;
      font-size: 20px;
    }
  }
}
.tools {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  .el-card {
    width: 300px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
</style>
